import { Enhance_Kill, showhistory } from "./main";
import { jsxToDom } from "./utils";
import React from "react";
let foot = document.createElement("div");

function Clear(): void {
    const needConfirm = confirm("你确定吗？");
    if (needConfirm === true) {
        GM_listValues().forEach(f => GM_deleteValue(f));
        location.reload();
    }
}

function show() {

    if (window.usingShow == 1) {
        (document.getElementById("show") as Element).className = "module-switch module-switch-off";
        for (let i = 0; i < window.Show.length; i++)
            (window.Show[i] as HTMLInputElement).checked = false;
    } else {
        (document.getElementById("show") as Element).className = "module-switch module-switch-on";
        for (let i = 0; i < window.Show.length; i++)
            (window.window.Show[i] as HTMLInputElement).checked = true;
    }
    window.usingShow = 1 - window.usingShow;
    localStorage.setItem('usingShow', window.usingShow.toString());
}

function kill() {
    if (window.usingKill === 1) {
        (document.getElementById("kill") as Element).className = "module-switch module-switch-off";
        for (let j = 0; j < window.Arc.length; j++) {
            foot.append(window.Arc[j].lastElementChild as Element);
        }
        for (let j = 0; j < window.Arc.length; j++) {
            window.Arc[j].append(window.ORI.lastElementChild as Element);
        }
    } else {
        if (window.firstKill === 1) Enhance_Kill(), window.firstKill = 0;
        else {
            (document.getElementById("kill") as Element).className = "module-switch module-switch-on";
            for (let j = 0; j < window.Arc.length; j++)window.ORI.append(window.Arc[j].lastElementChild as Element);
            for (let j = 0; j < window.Arc.length; j++)window.Arc[j].append(foot.lastElementChild as Element);
        }
    }
    window.usingKill = 1 - window.usingKill;
    localStorage.setItem('usingKill', window.usingKill.toString());
}



function history() {
    if (window.usingAdminHistory === 1) {
        (document.getElementById("history") as Element).className = "module-switch module-switch-off";
        (document.getElementById("discuss-collapse-nav") as Element).removeChild((document.getElementById("discuss-collapse-nav") as Element).lastElementChild as Element);
    } else {
        (document.getElementById("history") as Element).className = "module-switch module-switch-on";
        let t = document.createElement("li");
        let historyButton = document.createElement("a");
        historyButton.id = "history-button";
        historyButton.addEventListener(`click`, () => {
            showhistory();
        });
        historyButton.innerHTML = `<span class="am-icon-history"></span> 历史记录`;
        t.appendChild(historyButton);
        (document.getElementById("discuss-collapse-nav") as Element).appendChild(t);
    }
    window.usingAdminHistory = 1 - window.usingAdminHistory;
    localStorage.setItem('usingHistory', window.usingAdminHistory.toString());
}


function showAcceptRate() {
    if (window.usingRate === 1) {
        (document.getElementById("rate") as Element).className = "module-switch module-switch-off";
        (document.getElementById("accept_rate") as HTMLElement).style.display = "none";
    } else {
        (document.getElementById("rate") as Element).className = "module-switch module-switch-on";
        (document.getElementById("accept_rate") as HTMLElement).setAttribute(`style`, ``);
    }
    window.usingRate = 1 - window.usingRate;
    localStorage.setItem('usingRate', window.usingRate.toString());
}


function clz() {

    if (window.usingClz === 1) {
        (document.getElementById("clz") as Element).className = "module-switch module-switch-off";
        const elements = document.getElementsByClassName("toggleclz");
        for (let i = 0; i < elements.length; i++) {
            (elements[i] as HTMLElement).style.display = "none";
        }

    } else {
        (document.getElementById("clz") as Element).className = "module-switch module-switch-on";
        const elements = document.getElementsByClassName("toggleclz");
        for (let i = 0; i < elements.length; i++) {
            (elements[i] as HTMLElement).style.display = "inline";
        }
    }
    window.usingClz = 1 - window.usingClz;
    localStorage.setItem('usingClz', window.usingClz.toString());
}


function unfold() {
    if (window.usingUnfold === 1) {
        (document.getElementById("unfold") as Element).className = "module-switch module-switch-off";
        const targetElements = document.getElementsByClassName("exadmin-reason-list");
        for (let i = 0; i < targetElements.length; i++) {
            const $div = $(targetElements[i]);
            $div.unbind('mouseenter').unbind('mouseleave');
        }
    } else {
        (document.getElementById("unfold") as Element).className = "module-switch module-switch-on";
        const targetElements = document.getElementsByClassName("exadmin-reason-list");
        for (let i = 0; i < targetElements.length; i++) {
            const $div = $(targetElements[i]);
            $div.on({
                mouseenter: () => $div.addClass('onshow'),
                mouseleave: () => $div.removeClass('onshow'),
            });
        }
    }
    window.usingUnfold = 1 - window.usingUnfold;
    localStorage.setItem('usingUnfold', window.usingUnfold.toString());
}

export async function addTopBar() {
    let boardDiv = <div className='board'>
        <div className='switch-list'>
            <h2>
                <span style={{ fontSize: '18px' }}>模块</span>
                <span className='exadmin-button' style={{ marginLeft: '1.5em', padding: '3px 5px', backgroundColor: '#5eb95e' }} onClick={() => { Clear() }}>
                    清空所有数据
                </span>
                <span className='exadmin-button' style={{ padding: '3px 5px', backgroundColor: 'red' }} onClick={() => { alert(`还没写完`) }}>
                    导入 LocalStorage
                </span>
            </h2>
            <span className='switches'>
                <span style={{ cursor: 'help' }} title='提供更多更好的分类毙题解理由，并且可以自定义。'>
                    优化毙题解原因
                </span>
                <span
                    id='kill'
                    className={`module-switch module-switch-${localStorage.getItem('usingKill') === '1' ? `on` : `off`}`}
                    onClick={() => {
                        kill();
                    }}
                >
                    <div>
                        <figure className="switch-circle" />
                    </div>
                </span>
                <span
                    style={
                        {
                            fontSize: '12px',
                            marginLeft: '10px'
                        }}
                    className='module-board'>
                    <div style={{ marginTop: '12px' }}>
                        默认勾选显示管理员信息
                        <span id='show' className={`module-switch module-switch-${localStorage.getItem('usingShow') === '1' ? 'on' : 'off'}`} onClick={() => { show() }}>
                            <div>
                                <figure className="switch-circle" />
                            </div>
                        </span>
                    </div>
                    <div style={{ marginTop: '12px' }}>
                        鼠标悬停展开
                        <span
                            id='unfold'
                            className={`module-switch module-switch-${localStorage.getItem('usingUnfold') === '1' ? 'on' : 'off'}`}
                            onClick={() => { unfold() }}
                        >
                            <div>
                                <figure className="switch-circle" />
                            </div>
                        </span>
                    </div>
                </span>
            </span>
            <br />
            <span className='switches'>
                <span style={{ cursor: "help" }} title="内含粉兔模拟器，检查格式的不二利器，您杀掉题解的有力助手。">文章内容重渲染</span>
                <span
                    id='clz'
                    className={`module-switch module-switch-${localStorage.getItem('usingClz') === '1' ? `on` : `off`}`}
                    onClick={() => {
                        clz();
                    }}
                >
                    <div>
                        <figure className="switch-circle" />
                    </div>
                </span>
            </span>
            <br />
            <span className='switches'>
                <span style={{ cursor: "help" }} title="显示您累计放过的题解占您审核题解的比例。">通过率数据</span>
                <span
                    id='rate'
                    className={`module-switch module-switch-${localStorage.getItem('usingRate') === '1' ? `on` : `off`}`}
                    onClick={() => {
                        showAcceptRate();
                    }}
                >
                    <div>
                        <figure className="switch-circle" />
                    </div>
                </span>
            </span>
            <br />
            <span className='switches'>
                <span style={{ cursor: "help" }} title="统计并显示历史记录">历史记录统计</span>
                <span
                    id='history'
                    className={`module-switch module-switch-${localStorage.getItem('usingHistory') === '1' ? `on` : `off`}`}
                    onClick={() => {
                        history();
                    }}
                >
                    <div>
                        <figure className="switch-circle" />
                    </div>
                </span>
            </span>
        </div>
    </div >
    let topbarBrand = document.getElementsByClassName(`am-topbar-brand`)[0]
    topbarBrand.appendChild(await jsxToDom(boardDiv))
}